<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
  <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>加油记录</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/weui.css"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/wechat.css"/>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/iScroll.css"/>

</head>
<body>
	<input type="hidden" id="rowCount" value="${pageView.rowCount }">
	<div id="wrapper">
		<div id="scroller">
			<div id="pullDown">
				<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
			</div>
			<ul id="thelist"></ul>
			
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载下页...</span>
			</div>
		</div>
	</div>
	<div class="footer">
		<span>本服务由</span>
	    <img src="${pageContext.request.contextPath}/images/logo.png" title="油掌柜" />
	    <span>提供技术支持</span>
	</div>
	<!--  -->
	<input type="hidden" id="timestamp" value="${map['timestamp']}"/>
	<input type="hidden" id="nonceStr" value="${map['nonceStr']}"/>
	<input type="hidden" id="signature" value="${map['signature']}"/>
	<input type="hidden" id="appId" value="${map['appid']}"/>
	<input type="hidden" id="code" value="${map['code']}"/>
	
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	 <script type="text/javascript" src="${pageContext.request.contextPath}/js/iscroll.js"></script>
	 <script type="text/javascript" src="${pageContext.request.contextPath}/js/iscroll_show.js"></script>
	 <script src="${pageContext.request.contextPath}/js/zepto.min.js"></script>
	<script type="text/javascript">
		 var timestamp = $("#timestamp").val();//时间戳
		    var nonceStr = $("#nonceStr").val();//随机串
		    var signature = $("#signature").val();//签名
		    var appId = $("#appId").val();//签名
		    var code = $("#code").val();//签名
		    wx.config({
		  	  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		  	  appId: appId, // 必填，公众号的唯一标识
		  	  timestamp: timestamp, // 必填，生成签名的时间戳
		  	  nonceStr: nonceStr, // 必填，生成签名的随机串
		  	  signature: signature,// 必填，签名，见附录1
		  	  jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		    });
		    wx.ready(function(){
		    	navigation.getLocation();
		    });
		    
		    var navigation ={
		    		path : function (latitude,longitude,address,names){
		    			alert("==========");
				    	wx.openLocation({
				    	      latitude: latitude,
				    	      longitude: longitude,
				    	      name: names,
				    	      address: address,
				    	      scale: 14,
				    	      infoUrl: 'http://wx.wiz-tech.com.cn'
				    	  });
			    	},
			    	getLocation : function(){
			    		wx.getLocation({
					        success: function (res) {
					  		  lat = res.latitude; // 经度，浮点数，范围为90 ~ -90
					  	      lng = res.longitude; // 纬度，浮点数，范围为180 ~ -180。
					  	      pullDownAction();
					        },
					        cancel: function (res) {
					          alert('你拒绝授权获取地理位置，无法获取油站列表！');
					        }
				      	});
			    	}
		    };
		    $(function(){
		    	 pullDownAction();
		    });
	
		var myScroll,
		pullDownEl, pullDownOffset,
		pullUpEl, pullUpOffset,
		pageSize=2,rowCount,lat,lng,
		generatedCount = 1;
	
		function pullDownAction () {
  			$.ajax({
		  	      type: "POST",
		  	      url: "${pageContext.request.contextPath}/navigation/stationList",
		  	      data: {pageNo:1,pageSize:pageSize,lat:lat,lng:lng},
		  	      success: function(data){
		  	    	var result = '';
		  	    	  if(data.code == 200){
		  	    		generatedCount = 1;
	  	    			rowCount = data.rowCount;
	  	    			if(data.records.length<=0){
	  	    				$("#pullDown").hide();
	  	    				$("#pullUp").hide();
			  	    		$("#thelist").html("<li id=\"no_date_li\" style=\"text-align: center;\">"+
			              	 "<div class=\"weui_cell\" id=\"fuelling_div\" style=\"text-align: center;\">当前无数据</div></li>");
	  	    			}else{
			  	    		$("#thelist").html("");
	  	    			}
		  	    		$.each(data.records, function(name, value) {
		  	    			result = "<li><div class=\"weui_cell\" onclick=\"navigation.path("+this.lat+","+this.lng+",'"+this.province+this.city+this.address+"','"+this.stationName+"')\">"+
		                            "<div class=\"weui_cell_bd weui_cell_primary\" >"+
		                            "<p>"+this.stationName+"<span class=\"navi-address\">"+this.province+this.city+this.address+"</span></p>"+
		                        "</div>"+
		                        "<div class=\"weui_cell_ft text-black\">"+this.distance/1000+" km</div>"+
		                        "<img class=\"navi-icon\" src=\"${pageContext.request.contextPath}/images/navigation.png\">"+
		                    "</div></li>";
		  	    			
			  	    		$("#thelist").append(result);
			  	    		myScroll.refresh();
		  	    		});
		  	    	  }else{
			  	        alert("加油站列表加载失败！");
		  	    	  }
		  	      }
		  	   });
		};
		
		function pullUpAction () {
			$.ajax({
		  	      type: "POST",
		  	      url: "${pageContext.request.contextPath}/navigation/stationList",
		  	      data: {pageNo:(++generatedCount),pageSize:pageSize,lat:lat,lng:lng},
		  	      success: function(data){
		  	    	var result = '';
		  	    	  if(data.code == 200){
	  	    			rowCount = data.rowCount;
		  	    		$.each(data.records, function(name, value) {
		  	    			result = "<li><div class=\"weui_cell\">"+
		                            "<div class=\"weui_cell_bd weui_cell_primary\">"+
		                            "<p>"+this.stationName+"<span class=\"navi-address\">"+this.province+this.city+this.address+"</span></p>"+
		                        "</div>"+
		                        "<div class=\"weui_cell_ft text-black\">"+this.distance/1000+" km</div>"+
		                        "<img class=\"navi-icon\" onclick=\"navigation.path("+this.lat+","+this.lng+","+this.province+this.city+this.address+","+this.stationName+")\" src=\"${pageContext.request.contextPath}/images/navigation.png\">"+
		                    "</div></li>";
		  	    			
			  	    		$("#thelist").append(result);
			  	    		myScroll.refresh();
		  	    		});
		  	    	  }else{
			  	        alert("加油站列表加载失败！");
		  	    	  }
		  	      }
		  	   });
		};
		
	</script>
</body>
</html>